<template>
  <div>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('clientVersionManage.basicInformation')" name="first">
          <el-form :inline="true" class="" label-position="right" label-width="130px">
            <el-form-item label="ID">
              {{ clientData.id }}
            </el-form-item>
            <el-form-item :label="$t('common.name')">
              {{ clientData.name }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.productModel')">
              {{ clientData.product_model }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.versionNumber')">
              {{ clientData.version_number }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.fileSize')">
              {{ myBytesToSize(clientData.file_size) }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.fileMd5sum')">
              {{ clientData.file_md5sum }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.defaultVersion')">
              <span v-if="clientData.is_default">{{ $t('clientVersionManage.yes') }}</span>
              <span v-else>{{ $t('clientVersionManage.no') }}</span>
            </el-form-item>
            <el-form-item :label="$t('common.description')">
              {{ clientData.description }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.createdAt')">
              {{ myParseTime(new Date(clientData.created_at)) }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.updatedAt')">
              {{ myParseTime(new Date(clientData.updated_at)) }}
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import LinkButton from '../../../components/Basic/Button/LinkButton.vue';
import { parseTime, formatSeconds, bytesToSize } from "../../../utils/index"
export default Vue.extend({
  components: {
    LinkButton
  },
  props: {
    clientVersionData: Object
  },
  data() {
    return {
      clientData: {},
      activeName: 'first'
    }
  },
  mounted() {
  },
  watch: {
    clientVersionData: {
      handler: function() {
        (this as any).clientData = this.clientVersionData
      },
      immediate: true
    }
  },
  methods: {
    myBytesToSize(size: any) {
      return bytesToSize(size);
    },

    myParseTime(t: any) {
      return parseTime(t);
    },
  }
})
</script>
<style lang="scss" scoped>

</style>
